<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <title>Document</title>
</head>
<style>
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
#app{
  padding: 30px;
}
.item{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* text-align: center; */
  font-size: 3rem;
}
.items{
  width: 45%;
}
img{
  width: 100%;
}
p{
  margin: 40px 0;
}
.pic{
  color: rgb(236, 13, 13);
  font-size: 2rem;
}
</style>
<body>
<div id="app">
  <ul class="item">
    <li class="items" v-for="item in items" :key="item.id">
      <img :src="item.pic" alt="">
      <p>{{item.name | ellipsis}}</p>
      <p class="pic">{{item.minPrice | currency("$")}}</p>
    </li>
  </ul>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.7/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.js"></script> -->
<script>
Vue.filter('currency', (v,sign="￥")=>{
  return sign+v
})
const vm = new Vue({
  el: '#app',
  data: {
    items: []
  },
  created(){
    this.fetchItems()
  },
  methods: {
    fetchItems(){
      axios({
        url:'https://api.it120.cc/conner/shop/goods/list',
        method:"post",
      }).then(res=>{
        console.log(res);
        if(res.data.code === 0){
          this.items = res.data.data;
        }
      })
    }
  },
  filters: {
		ellipsis (value) {
		let len=value.length;
		if (!value) return ''
		if (value.length > 5) {
			return value.substring(0,5) + '....'
		}
		return value
		}
	}
})
</script>
</html>